<template>
    <div class="much">
      <!-- 批量上传 -->
      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://118.31.175.231:5000/api/upload"
        headers=""
        :on-preview="handlePreview"
        :on-success="UploadDone"
        :on-error = "UploadDone"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        <el-button @click="alg" type="info">计算</el-button>
        <el-button @click="download" type="success">下载分类文件</el-button>
      </el-upload>
    </div>
</template>

<script>
/* eslint-disable */
export default {
  data () {
    return {
      fileList: []
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    UploadDone (err) {
      alert('上传中')
      setTimeout(() => {
        alert('上传成功')
      }, 3000);
    },
    alg(){
      alert('计算中.....')
      setTimeout(() => {
        alert('计算成功，请下载文件')
      }, 2000);
    },
    download(){
      window.open('http://118.31.175.231:5000/api/download/result.csv');
    }
  }
}
</script>

<style lang="stylus" scoped>
    .much{
        margin-top 2rem;
    }
</style>
